import Vue from 'vue'
import VueRouter from 'vue-router'

// 注册  把Vue-Router注册到项目中
Vue.use(VueRouter)

/*
  路由：体现对应关系,更专业来说就是一种映射
  生活中的路由器：ip地址和设备的对应关系
  前端路由：地址栏上的地址视图（组件）的对应关系  -- 其他都是了解，我们重点掌握这个
  后端路由：请求路径和接口函数的对应关系

  前端路由的核心 -- 改变URL，但是页面不进行整体的刷新

*/

// 解决编程式导航点击同一个按钮时会报错(vue-router 3.0.0 后面都会有这个官方bug)
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function (location) {
    return originalPush.call(this, location).catch(err => {})
};

// 路由表
const routes = [{
        path: '/',
        redirect: '/tab' // 重定向 当页面访问 '/' 的时候，浏览器重定向到 '/home'
    },
    {
        path: '/tab',
        redirect: '/tab/index'
    },
    {
        path: '/tab',
        name: 'Tab',
        component: () =>
            import('../views/Tab.vue'),
        children: [{
                path: '/tab/index',
                component: () =>
                    import('../components/Index.vue')
            },
            {
                path: '/tab/category',
                component: () =>
                    import('../components/Category.vue')
            }, {
                path: '/tab/cart',
                component: () =>
                    import('../components/Cart.vue')
            }, {
                path: '/tab/user',
                component: () =>
                    // 下面的注释叫魔法注释，跟以往的注释有所区别。
                    // 一般注释对程序不会起作用，而这种魔法注释在webpack打包的时候会去解析它，从而区分一个打包名字..
                    import( /* webpackChunkName: "user" */ '../components/User.vue')
            }
        ]
    }, {
        path: '/home',
        name: 'Home',
        component: () => //路由懒加载 -- ES6写法,是一个箭头函数。解决一开始项目太大，导致页面在加载会出现白屏
            import('../views/Home.vue')
    },
    {
        path: '/about',
        name: 'About',
        component: () =>
            import('../views/About.vue')
    },
    {
        path: '/user/:userId',
        name: 'User',
        component: () =>
            import('../views/User.vue')
    }
]


const router = new VueRouter({
    mode: 'history', // vue路由只有两种模式，一种是hash，一种是history。默认配置是hash
    base: process.env.BASE_URL,
    //linkActiveClass: 'active', // router-link 被选中路由样式
    routes
})

export default router